<template>

  <el-row style="height: 85vh;width: 100%;">

    <el-col :span="11" style="height: 100%;margin:2%;">
      <h2 style="width:100%;margin: 1%;text-align: center;color: #337ab7">基本信息</h2>
      <div style="width: 100%;height:40vh;margin-top: 2%;
                  background-image: url('http://47.97.65.11:3002/static/dqkg.png');
                  background-position: center center;
                  background-size: cover;
                  background-repeat: no-repeat;">
      </div>
      <div style="display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  width: 100%;height:25vh;margin: 1%;padding-top: 5%">
        <label style="line-height: 40px;height:40px;text-align-all: center;width:30%;margin-top: 1%;">编&emsp;&emsp;&emsp;&emsp;&emsp;号：</label>
        <label style="line-height: 40px;height:40px;text-align: center;width:60%;margin-top: 1%;">{{matchResult.f008}}</label>
        <label style="line-height: 40px;height:40px;width:30%;margin-top: 1%;">名&emsp;&emsp;&emsp;&emsp;&emsp;称：</label>
        <label style="line-height: 40px;height:40px;text-align: center;width:60%;margin-top: 1%;">{{matchResult.f007}}</label>
        <label style="line-height: 40px;height:40px;width:30%;margin-top: 1%;">所&emsp;在&emsp;设&emsp;备：</label>
        <label style="line-height: 40px;height:40px;text-align: center;width:60%;margin-top: 1%;">{{matchResult.f005}}</label>
        <label style="line-height: 40px;height:40px;width:30%;margin-top: 1%;">设&emsp;备&emsp;品&emsp;种：</label>
        <label style="line-height: 40px;height:40px;text-align: center;width:60%;margin-top: 1%;">{{matchResult.f004}}</label>
        <label style="line-height: 40px;height:40px;width:30%;margin-top: 1%;">所&emsp;在&emsp;位&emsp;置：</label>
        <label style="line-height: 40px;height:40px;text-align: center;width:60%;margin-top: 1%;">{{matchResult.f006}}</label>
        <label style="line-height: 40px;height:40px;width:30%;margin-top: 1%;">所&emsp;在&emsp;单&emsp;位：</label>
        <label style="line-height: 40px;height:40px;text-align: center;width:60%;margin-top: 1%;">{{matchResult.f001}}</label>

      </div>
      <div>

      </div>
    </el-col>
    <el-col :span="11" style="height: 100%;margin:2%;">
      <el-row><h2 style="width:100%;margin: 1%;text-align: center;color: #337ab7">温度监测数据</h2></el-row>
      <div style="display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  width: 100%;height:41px;margin: 1%;">
        <label style="line-height: 40px;height:40px;width:30%;margin-left: 30%">
          选择时间:
        </label>
<!--        <el-date-picker style="height: 40px;width:60%"-->
<!--        v-model="time"-->
<!--        type="datetime"-->
<!--        placeholder="选择日期时间">-->
<!--      </el-date-picker>-->
        <el-select style="" v-model="timeValue"  @change="searchData" placeholder="请选择时间">
          <el-option
            v-for="(value,key) in timeData"
            :value="value"
            :key="key"
         >
          </el-option>
        </el-select>
      </div>

      <el-row style="width: 100%;">
        <el-col :span="11" style="height: 70vh;margin:1%;">
          <div style="width: 100%;height:60vh;margin-top: 2%;">
            <img :src="lefturl"style="object-fit: fill;width: 100%;height: 100%">
          </div>
          <div  style="display: flex;flex-direction:row;margin: 5%">
            <label style="height: 30px;line-height: 30px">当前最高温度</label>
            <label style="width: 5rem;height: 2rem;display: block;
                        margin: 0 auto;line-height: 2rem;text-align: center;" >{{max_temperature}}</label>
          </div>

        </el-col>
        <el-col :span="11" style="height:70vh;margin:1%;">

          <div style="width: 100%;height:60vh;margin-top: 2%;">
            <img :src="righturl"style="object-fit: fill;width: 100%;height: 100%">
          </div>

          <div  style="display: flex;flex-direction:row;margin: 5%">
          <label style="height: 30px;line-height: 30px">当前最低温度</label>
          <label style="width: 5rem;height: 2rem;display: block;
                        margin: 0 auto;line-height: 2rem;text-align: center;">{{min_temperature}}</label>
          </div>

        </el-col>
      </el-row>
    </el-col>

  </el-row>
</template>

<script>
import {DianqiguiIDSearchArgs,
        IDTemperatureSearchArgs,
        searchTemperatureDataList,
        searchTimeDataList,} from "../../../../api/dianqigui/data-warehouse";
import { serachDataCloudList } from '../../../../api/dianqigui/data-cloud'

export default {
  name: "detail",
  props: {
    id: {
      type: String,
      default: ''
    }
  },
created() {
},
  mounted() {

    this.getLeftImg()
    this.searchData()

  },
  data(){

    return{
      lefturl:'',
      righturl:'',
      time_args: new DianqiguiIDSearchArgs(),
      temperature_args:new IDTemperatureSearchArgs(),
      matchResult:{},
      timeValue:'',
      selectedValue:'',
      timeData:[],
      min_temperature:'',
      max_temperature:''
  }
  },
  methods: {
    getLeftImg(){
      this.lefturl="http://47.97.65.11:3002/static/left/"+this.id+".png"
    },

    async searchData() {
      const res1 = await serachDataCloudList(0, 30)
      const list1 = res1.data.list
      for (let i = 0; i < list1.length; i++) {
        if (list1[i].id == this.id) {
          this.matchResult = list1[i]
        }
      }

      const timeRes = await searchTimeDataList(this.matchResult.f011)
      this.timeData = timeRes.data.list

      console.log(this.timeValue+"!!")
      const res = await searchTemperatureDataList(this.matchResult.f011, this.timeValue)
      const data = res.data
      this.max_temperature = data.max_temperature
      this.min_temperature = data.min_temperature
      this.righturl="http://47.97.65.11:3002/static/right/"+data.f010+".jpg"
      // console.log(this.righturl)
    }
  }

}
</script>

<style scoped>

</style>
